<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/头部.css">
    <link rel="stylesheet" href="../css/购物车.css">
    <link rel="stylesheet" href="../css/底部.css">
    
    <script src="../js/utils/mock-min.js"></script>
    <script src="../js/utils/jquery.min.js"></script>
    <script src="../js/utils/qzdl.js"></script>

    <script src="../js/components/购物车前端.js"></script>
    <script src="../js/API/购物车后端.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="toubu">
            <div class="logo">
                <img src="../img/logo.webp" alt="">
            </div>
            <div class="biaoti">
                <ul>
                    <li><a href="../html/首页.html"><span>首页</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/关于.html"><span>关于</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/茶叶.html"><span>茶叶</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/基地.html"><span>基地</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/新闻.html"><span>新闻</span></a>
                        <div class="xian"></div>
                    </li>
                    <li><a href="../html/联系.html"><span>联系</span></a>
                        <div class="xian"></div>
                    </li>
                </ul>
            </div>
            <div class="tubiao">
                <div class="tubiao2">
                    <div class="tubiao3">
                        <div class="tubiao4"><img src="../img/搜索.png" alt=""></div>
                        <div class="tubiao4"><img src="../img/用户.png" alt=""></div>
                        <div class="tubiao4" onclick="gwc()"><img src="../img/购物车.png" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 购物车 -->
    <div class="gouwuche">
        <!-- 左边 -->
        <div class="gouwuche-left">
            <div class="title">
                <div class="shopname">商品</div>
                <div class="shopprice">价格</div>
                <div class="shopnum">数量</div>
                <div class="shopsum">合计</div>
            </div>
            <div class="showshopcar">
            </div>
        </div>

        <!-- 右边 -->
        <div class="gouwuche-rigth">
            <div class="gouwuche-rigth-top">
                <div class="gouwuche-rigth-top-title">
                    购物车总计
                </div>
                <div class="gouwuche-rigth-top-table">
                    <table>
                        <tbody>
                            <tr>
                                <th>购物车小计</th>
                                <td id="xiaoji"></td>
                            </tr>
                            <tr>
                                <th>运费</th>
                                <td>免费送货</td>
                            </tr>
                            <tr>
                                <th>订单总计</th>
                                <td id="zongji"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="gouwuche-rigth-bottom">
                <div class="gouwuche-rigth-botto-syt">
                    前往收银台
                </div>
                <div class="gouwuche-rigth-bottom-bottom">
                    <div class="gouwuche-rigth-bottom-bottom-title">
                        优惠券:
                    </div>
                    <input type="text" placeholder="优惠券代码">
                    <button>使用优惠券</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer>
        <!-- 底部左边 -->
        <div class="bottomdiv">
            <div class="lianxi">
                <p>联系</p>
                <span>Contact</span>
            </div>
            <div class="guanyu">
                <div class="guanyu1">
                    关于我们
                </div>
                <div class="guanyu2">
                    <img src="../img/微信.png" alt="">
                    <img src="../img/新浪微博.png" alt="">
                </div>
            </div>
            <div class="qifeiye">
                <div class="qifeiye1">
                    起飞页自助建站平台
                </div>
                <div class="qifeiye2">
                    <span>地址：苏州市建外SOHO东区2号楼</span>
                </div>
                <div class="qifeiye2">
                    <span>邮编：100000</span>
                </div>
                <div class="qifeiye2">
                    <span>电话：010-69557550</span>
                </div>
            </div>
        </div>
        <!-- 底部右边 -->
        <div class="bottomdiv-right">
            <div class="erweima">
                <img src="../img/二维码.png" alt="">
                <p>微博</p>
            </div>
            <div class="erweima">
                <img src="../img/二维码.png" alt="">
                <p>微信</p>
            </div>
        </div>

        <!-- 底部底部 -->
        <div class="COPYRIGHT">
            <div class="COPYRIGHTtitle">
                COPYRIGHT (©) 2019 茶叶类网站 京ICP备41414141414-1号
            </div>
        </div>
    </footer>
</body>
<script>
    function gwc() {
        location.href = '../html/购物车.html'
    }
</script>

</html>